<template>
  <div v-if="data.length" class="ButtonActions">
    <template v-for="(btn, _) in data" :key="_">
      <template v-if="btn.eventType === BTN_EVENT_TYPE.IMPORT">
        <BasicImport
          :multiple="true"
          @success="handleSuccess"
          :api="
            async (params, fn) => {
              const callback = await handleImportApi(btn, tableFn);
              return await callback(params, fn);
            }
          "
        >
          <Button
            v-if="getShow(btn)"
            class="mr-3"
            :type="btn.type || 'default'"
            :shape="btn.shape || 'default'"
          >
            <template v-if="btn.icon" #icon><Icon :icon="btn.icon" /></template>
            {{ btn.label || btn.btnText }}
          </Button>
        </BasicImport>
      </template>
      <template v-else>
        <Button
          v-if="getShow(btn)"
          :type="btn.type || 'default'"
          :shape="btn.shape || 'default'"
          class="mr-3"
          @click="handleComBtn(btn)"
        >
          <template v-if="btn.icon" #icon><Icon :icon="btn.icon" /></template>
          {{ btn.label || btn.btnText }}
        </Button>
      </template>
    </template>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import type { PropType } from 'vue';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  import { defHttp } from '/@/utils/http/axios';

  import { Button } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  // import { useModal } from '/@/components/Modal';

  import { BTN_EVENT_TYPE } from '/@/views/config-center/model-design/model';
  import { TableActionType } from '/@/components/Table';
  import { handleImportApi } from '../hooks/functionSet';
  import { isBoolean } from '/@/utils/is';

  // 按钮公共属性配置
  export default defineComponent({
    name: 'ButtonActions',
    components: {
      BasicImport: createAsyncComponent(
        () => import('/@/components/ImportButton/src/BasicImport.vue'),
      ),
      Button,
      Icon,
    },
    props: {
      data: {
        required: true,
        type: Array as PropType<Recordable[]>,
        default: () => [],
      },
      tableFn: {
        type: Object as PropType<TableActionType>,
        default: () => {},
      },
    },
    emits: [
      'add',
      'success',
      'edit',
      'save',
      'cancel',
      'custom',
      'import',
      'delete',
      'del',
      'flow-add',
      'flow-handround',
      'flow-consult',
      'flow-turnbatch',
      'flow-renovate',
      'flow-revocation',
      'custom-component',
    ],
    setup(props, { emit }) {
      props.data.forEach(async (record) => {
        await judgeShow(record.visibleExpression, record);
      });

      // 按钮的事件派发处理
      async function handleComBtn(btnItem: any) {
        if (btnItem.eventType) {
          emit(btnItem.eventType, btnItem, props.tableFn);
        }
      }

      function handleSuccess() {
        props.tableFn && props.tableFn?.reload();
      }
      function getShow(schema: Indexable) {
        if (isBoolean(schema.ifShow)) return schema.ifShow;
        return true;
      }

      async function judgeShow(visibleExpression: string, schema: Indexable) {
        const fn = new Function(
          'record',
          'defHttp',
          `return (async function(record,defHttp){${visibleExpression}})(record,defHttp)`,
        );

        return fn(schema, defHttp) as Boolean;
      }
      return {
        getShow,
        handleComBtn,
        handleSuccess,
        BTN_EVENT_TYPE,
        handleImportApi,
      };
    },
  });
</script>
<style lang="less" scoped>
  .ButtonActions {
    > button:first-child {
      margin-left: 0;

      &[class*='btn-link'] {
        padding-left: 0;
      }
    }

    button[class*='btn-link'] {
      margin-left: 0;
      padding-left: 0;
    }
  }
</style>
